import React from 'react';
import { observer } from 'mobx-react-lite';
import { useHistory, useLocation } from 'react-router';
import { Link } from 'react-router-dom';
import { Layout, Menu } from 'antd';
import { layoutService } from '~/services/layout';
import { MenuItem as MenuItemType, SubMenuItem, menuMap } from './sideMenuUtils';
import './index.local.sass';

const { Sider } = Layout;
const { SubMenu } = Menu;

const getCurrentId = (item: MenuItem) => {
  if (item?.hide && !item.parentItem?.hide) {
    return item?.parentItem?.id ?? '';
  }

  return item?.id ?? '';
};

const hasChildMenu = (item: MenuItem) => {
  if ('subMenu' in item) {
    return item.subMenu.every((v) => v.hide);
  }

  return true;
};

type MenuItem = MenuItemType | SubMenuItem;

export const SideMenu = observer(() => {
  const { state, setCollapse, getMenuList } = layoutService;
  const { theme } = state;
  const history = useHistory();
  const location = useLocation();
  const currentMenu = menuMap.get(location.pathname);
  const currentMenuId = getCurrentId(currentMenu as MenuItem);

  const getCurrentMenuKeys = () => {
    let item: MenuItem | undefined = currentMenu;
    const arr = [];
    while (item) {
      arr.unshift(item.id);
      item = item.parentItem;
    }

    arr.pop();

    return arr;
  };

  const renderMenuItem = (item: MenuItem) => {
    if (hasChildMenu(item)) {
      return <Menu.Item key={item.id} onClick={() => {
        history.push(item.path ?? '');
      }}>
        <span className="side-icon">
          {!!item.icon && item.icon}
          <span>{item.name}</span>
        </span>
      </Menu.Item>;
    }

    return (
      <SubMenu
        key={item.id}
        title={
          <span className="side-icon">
            {!!item.icon && item.icon}
            <span>{item.name}</span>
          </span>
        }
      >
        {(item as SubMenuItem).subMenu.map((v) => renderMenuItem(v))}
      </SubMenu>
    );
  };

  React.useEffect(() => {
    // get remote menu (for permission control)
    getMenuList();
  }, []);

  const menuList = layoutService.state.menuList;

  return (
    <Sider
      trigger={null}
      theme={theme}
      collapsible
      collapsed={state.collapsed}
      onCollapse={setCollapse}
      className="side-menu"
    >
      <Link
        className="logo-wrap flex items-center"
        to="/"
      >
        <img
          src="/logo.png"
          alt="logo"
          className="logo"
        />

        <img
          src="/logo_full.png"
          alt="logo_full"
          className="logo-full"
        />
      </Link>
      <Menu
        theme={theme}
        defaultSelectedKeys={[currentMenuId]}
        defaultOpenKeys={getCurrentMenuKeys()}
        selectedKeys={[currentMenuId]}
        mode="inline"
      >
        {
          // local menu
          // MenuList.length
          //   ? MenuList.map((item: any) => renderMenuItem(item))
          //   : null

          // remote menu
          menuList.length
            ? menuList.map((item: any) => renderMenuItem(item))
            : null
        }
      </Menu>
    </Sider>);
});
